<template>
  <div>
    <button @click="showUserModal = true">查看用户详情</button>

    <AsyncUserModal
      v-if="showUserModal"
      :is-visible="showUserModal"
      title="用户详情"
      @close="showUserModal = false"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue'

const showUserModal = ref(false)

// 异步加载模态框组件
const AsyncUserModal = defineAsyncComponent({
  loader: () => import('@/components/Modal.vue'),
  loadingComponent: {
    template: '<div>加载组件中...</div>',
  },
  // errorComponent: ErrorDisplay,
  // delay: 200,
  // timeout: 3000
  // onError(error, retry, fail, attempts) {
  //   if (error.message.includes('timeout')) {
  //     console.log('组件加载超时')
  //   }
  //   fail()
  // },
})

// 路由级别的异步组件，如下
// const routes = [
//   {
//     path: '/',
//     name: 'Home',
//     component: () => import('../views/Home.vue')
//   },
//   {
//     path: '/about',
//     name: 'About',
//     component: () => import('../views/About.vue')
//   },
//   {
//     path: '/user/:id',
//     name: 'User',
//     component: () => import('../views/User.vue')
//   }
// ]
</script>
